<template>
	<section>
		<!--start  面包屑-->
	    <div class="location">
	        <el-breadcrumb separator="/">
		        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
		        <el-breadcrumb-item :to="{path:'/keHu'}">客户</el-breadcrumb-item>
		        <el-breadcrumb-item :to="{path:'/keHu'}">客户列表</el-breadcrumb-item>
		        <el-breadcrumb-item>新增个人客户</el-breadcrumb-item>
	        </el-breadcrumb>
	        		<help-components>
				<span slot="headText">{{helpData.templateName}}</span>
				<p slot="headDescText" v-html="helpData.templateRemark"></p>
				<div slot="helpContentWrap">
					<div v-for="(item,index) in helpData.questionAndAnswerArray">
						<h3>{{item.templateContent}}</h3>
						<p v-html="item.templateRemark"></p>
					</div>
				</div>
			</help-components>
	    </div>
	     <!--start content-->
   		 <div class="content" id="content"  v-loading.body="loading">
   		 	<h2 style="color: #03b8cc;font-weight: normal;">个人信息</h2>
   		 	<div class="personal">
   		 		<div class="per-left">
   		 			<ul>
   		 				<li>
		   		 			<em class="iconfont">&#xe708;</em><span>姓名</span>
		   		 			<input class="inptwid" type="text" v-model="memberName" @blur="namenull" /><br>
		   		 			<!---->
		   		 			<p v-if="inname" style="text-align: left;text-indent: 80px;color: #ff4949;">姓名不能为空！</p>
		   		 		</li>
		   		 		<li>
		   		 			<em class="iconfont">&#xe708;</em><span class="zhiwei" style="position: relative;top: 2px;">级别</span>
		   		 			 <el-select v-model="gradeCode" >
							    <el-option
							        v-for="item in options"
							        :key="item.gradeCode"
							        :label="item.gradeName"
							        :value="item.gradeCode">
							    </el-option>
							  </el-select>
		   		 		</li>
		   		 		<li>
		   		 			<span>电话</span>
		   		 			<input class="inptdun" type="text" v-model="operatorTel" style="margin-right: 65px;" />
		   		 			<span>QQ</span>
		   		 			<input class="inptdun" type="text" v-model="operatorQq" @blur="varQq"/>
		   		 			<p v-if="oQq" style="text-align: left;text-indent: 398px;color: #ff4949;position: absolute;">请输入正确QQ</p>
		   		 		</li>
		   		 		<li style="text-align: left;margin-left:38px;">
		   		 			<span>Email</span>
		   		 			<input class="inptdun" type="text" v-model="operatorEmail" @blur="valemail" />
		   		 			<p v-if="oemail" style="text-align: left;text-indent: 40px;color: #ff4949;position: absolute;">请输入正确邮箱</p>
   		 				</li>
   		 			</ul>
   		 		</div>
   		 		<div class="per-right">
   		 			<span>头像</span>
   		 			<el-upload
					    class="avatar-uploader"
					    :class="{uploading:headerImg.uploading}"
					    :action="uploadUrl"
					    :data="headerImg.updata"
					    :show-file-list="false"
					    :on-success="handleAvatarSuccess"
					    :on-error="handleAvatarError"
					    :before-upload="beforeAvatarUpload">
					    <img v-if="headerImg.isImgSrc" :src="headerImg.imgSrc" class="avatar">
				    	<i v-else class="avatar-uploader-icon" :class="{'el-icon-plus':!headerImg.uploading,'el-icon-loading':headerImg.uploading}"></i>
					</el-upload>
   		 		</div>
   		 	</div>
   		 	<div class="persZh">
   		 		<div class="shenfen">
   		 			<span class="perSpan">身份证正面</span>
   		 			<el-upload
					    class="avatar-shenfen-uploader avatar-uploader"
					    :action="uploadUrl"
					    :data="certificateImg1.updata"
					    :show-file-list="false"
					    :on-success="handleAvatarSuccess1"
					    :on-error="handleAvatarError1"
					    :before-upload="beforeAvatarUpload1">
					    <img v-if="certificateImg1.isImgSrc" :src="certificateImg1.imgSrc" class="avatar">
				    	<i class="avatar-uploader-icon el-icon-plus" v-else></i>
					</el-upload>
   		 		</div>
   		 		<div class="">
   		 			<img src="../../../img/u676.png" />
   		 		</div>
   		 	</div>
   		 	<div class="persZh">
   		 		<div class="shenfen">
   		 			<span class="perSpan">身份证反面</span>
					<el-upload
					    class="avatar-shenfen-uploader avatar-uploader"
					    :action="uploadUrl"
					    :data="certificateImg2.updata"
					    :show-file-list="false"
					    :on-success="handleAvatarSuccess2"
					    :on-error="handleAvatarError2"
					    :before-upload="beforeAvatarUpload2">
					    <img v-if="certificateImg2.isImgSrc" :src="certificateImg2.imgSrc" class="avatar">
				    	<i class="avatar-uploader-icon el-icon-plus" v-else></i>
					</el-upload>
   		 		</div>
   		 		<div class="">
   		 			<img src="../../../img/u678.png" />
   		 		</div>
   		 	</div>

         <div class="persZh">
           <div class="shenfen">
             <span class="perSpan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名&nbsp;&nbsp;&nbsp;&nbsp;片</span>
             <el-upload
               class="avatar-shenfen-uploader avatar-uploader"
               :action="uploadUrl"
               :data="certificateImg3.updata"
               :show-file-list="false"
               :on-success="handleAvatarSuccess3"
               :on-error="handleAvatarError3"
               :before-upload="beforeAvatarUpload3">
               <img v-if="certificateImg3.isImgSrc" :src="certificateImg3.imgSrc" class="avatar">
               <i class="avatar-uploader-icon el-icon-plus"  v-else></i>
             </el-upload>
           </div>
         </div>
   		 	<div class="account">
   		 		<h2 style="color: #03b8cc;font-weight: normal;">账号信息</h2>
   		 		<ul class="accoUL accoULzhang">
   		 			<li>
   		 				<em class="iconfont">&#xe708;</em><span>手机</span>
		   		 		<input class="inptdun" type="text" v-model="operatorPhone" v-on:keyup="textphnoe" @blur="yanshouji" />
		   		 		<p v-if="inphone" style="text-align: left;text-indent: 80px;color: #ff4949;position: absolute;">{{phonege}}</p>
   		 			</li>
   		 			<li>
   		 				<em class="iconfont">&#xe708;</em><span>账号</span><input id="str" v-model="operatorAccount" v-on:keyup="textzhanghao" @blur="isalphanumber" />
   		 				<p v-if="inpu" style="text-align: left;text-indent: 80px;color: #ff4949;">账号不能为空！</p>
   		 			</li>
   		 			<li>
   		 				<em class="iconfont">&#xe708;</em><span>密码</span><input type="password" v-model="operatorLoginPassword" v-on:keyup="cnter" @blur="inpasswd"/>
   		 				<p v-if="inpaww" style="text-align: left;text-indent: 80px;color: #ff4949;">密码为6-20位字母或数字！</p>
   		 			</li>
   		 			<li class="accoUL-li">
   		 				<span v-bind:style="{background:ruo}">弱</span><span v-bind:style="{background:zhong}">中</span><span v-bind:style="{background:qing}">强</span>
   		 			</li>
   		 			<li>
   		 				<em class="iconfont">&#xe708;</em><span>确认密码</span><input type="password" v-model="inpasst" @blur="inpasstwo" />
   		 				<p v-if="intwo" style="text-align: left;text-indent: 80px;color: #ff4949;">两次密码必须一致！</p>
   		 			</li>
   		 			<!--<li style="text-align: left;text-indent: 26px;">
   		 				<el-checkbox v-model="checked">发送账号开通邮件</el-checkbox>
   		 			</li>-->
   		 		</ul>
   		 	</div>
   		 	<div class="caiwu">
   		 		<h2 style="color: #03b8cc;font-weight: normal;">财务信息</h2>
   		 		<ul class="accoUL" style="float: left;width: 620px;">
   		 			<li>
   		 				<span>开户名称</span><input v-model="operatorInvoiceNane"/>
   		 			</li>
   		 			<li>
   		 				<span>银行账号</span><input v-model="operatorInvoiceAccount"/>
   		 			</li>
   		 			<li>
   		 				<span>发票抬头</span><input v-model="operatorInvoiceTitle"/>
   		 			</li>
   		 		</ul>
   		 		<ul class="accoUL" style="float: left;width: 650px;">
   		 			<li>
   		 				<span>开户银行</span><input v-model="operatorInvoiceBank"/>
   		 			</li>
   		 			<li>
   		 				<span>纳税人识别号</span><input v-model="operatorInvoiceTaxId"/>
   		 			</li>
   		 		</ul>
   		 	</div>
   		 	<div class="queren" style="">
   		 		<el-button :disabled="clickBtn" @click="upsave"  type="primary">保存</el-button>
          <el-button @click="$router.push({path:'/kehu'})">取消</el-button>
   		 	</div>
   		 </div>
   		 <!--end content-->
	</section>
</template>
<script>
	import helpComponents from '../../../components/help/help'
	export default {
		components:{helpComponents},
      	data() {
	        return {
       			clickBtn:false,                 //请求数据后禁用按钮
	        	helpData:{
					templateName:"",
					templateRemark:"",
					questionAndAnswerArray:[]
				},
	        	/* start upload */
	        	uploadUrl:"/v3/misc/common/uploadFile",
	        	headerImg:{
	        		updata:{
							"moduleName":"basic",
							"fileName":"",
						},
	        		imgSrc:"",
	        		isImgSrc:false,
					uploading:false,
					canUpload:true
	        	},
	        	certificateImg1:{
	        		updata:{
							"moduleName":"basic",
							"fileName":"",
						},
	        		imgSrc:"",
	        		isImgSrc:false,
					uploading:false,
					canUpload:true
	        	},
	        	certificateImg2:{
	        		updata:{
							"moduleName":"basic",
							"fileName":"",
						},
	        		imgSrc:"",
	        		isImgSrc:false,
					uploading:false,
					canUpload:true
	        	},
            certificateImg3:{
              updata:{
                "moduleName":"basic",
                "fileName":"",
              },
              imgSrc:"",
              isImgSrc:false,
              uploading:false,
              canUpload:true
            },
	        	/* end upload */
	        	loading: false,							//加载中
	        	imageUrl: '',
	        	dialogImageUrl: '',
	        	oemail:false,							//验证邮箱
	        	oQq:false,								//验证QQ
	        	dialogVisible: false,
	        	checked: false,
	        	inpu:false,
	        	qing:false,								//强
	        	zhong:false,							//中
	        	ruo:'',									//弱
	        	disa:'',								//正面禁用
	        	disa2:'',								//反面禁用
	        	operatorLoginPassword:'',				//密码
	        	inpasst:'',								//确认密码
	        	inpaww:false,
	        	intwo:false,
	        	inname:false,							//姓名是否为空
	        	inphone:false,							//手机格式是否正确
	        	phonege:'请输入正确的手机号!',				//手机号格式提示
	        	qunbu:true,								//必须输入的信息
	        	memberName:'',      					//客户姓名
	        	operatorPhone:'',						//手机
	        	operatorTel:'',							//电话
	        	operatorQq:'',							//qq
	        	operatorEmail:'',						//邮箱
	        	operatorAccount:'',						//账户
//	        	paswod:'',								//密码
	        	operatorInvoiceNane:'',					//开户名称
	        	operatorInvoiceBank:'',        			//开户银行
	        	operatorInvoiceAccount:'',				//银行账号
	        	operatorInvoiceTaxId:'',				//纳税人识别号
	        	operatorInvoiceTitle:'',				//发票抬头
	        	options: [],							//客户级别
			    gradeCode: '',							//客户级别
			    shouji:'0',
			    zhanghao:'0',
			    uploadData:{
							"moduleName":"Goods",
							"fromTable":"SaleGoods",
							"fileName":"",
							"fromCode":""
						},
			}
     	},
      	methods: {
      		systemTemplateAjax(){
				this.axios({
					method:"GET",
					url:"/v3/system/templates/00100000003"
				}).then((res)=>{
						this.helpData.templateName = res.data.templateName;
						this.helpData.templateRemark = res.data.templateRemark;
						this.helpData.questionAndAnswerArray = res.data.questionAndAnswerArray;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
    //------------------------头像上传 start--------------------------
			handleAvatarSuccess(res,file,fileList) {
				this.headerImg.uploading = false;
		      	this.headerImg.canUpload = true;
		      	this.headerImg.isImgSrc = true;
				this.headerImg.imgSrc = res;
			},
			handleAvatarError(err, file , fileList){
				this.headerImg.uploading = false;
		      	this.headerImg.canUpload = true;
		      	this.headerImg.isImgSrc = !!this.headerImg.imgSrc;
		      	this.Public.openError(this,"上传失败");
			},
			beforeAvatarUpload(file) {
				this.headerImg.uploading = true;
		      	this.headerImg.canUpload = false;
		      	this.headerImg.isImgSrc = false;
		      	this.headerImg.updata.fileName = file.name;

				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.headerImg.uploading = false;
			      	this.headerImg.canUpload = true;
		        	this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
		        }
				if(!isLt2M) {
					this.headerImg.uploading = false;
			      	this.headerImg.canUpload = true;
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
			/* end uploadheadImg */
//------------------------头像上传 end--------------------------

//-----------------------/* start 身份证正面 */--------------------------
			handleAvatarSuccess1(res, file , fileList) {
				this.certificateImg1.fileListLength = fileList.length;
				this.certificateImg1.uploading = false;
		      	this.certificateImg1.canUpload = true;
		      	this.certificateImg1.isImgSrc = true;
				this.certificateImg1.imgSrc = res;
			},
			handleAvatarError1(err, file , fileList){
				this.certificateImg1.uploading = false;
		      	this.certificateImg1.canUpload = true;
		      	this.certificateImg1.isImgSrc = !!this.certificateImg1.imgSrc;
		      	this.Public.openError(this,"上传失败");
			},
			beforeAvatarUpload1(file) {
				this.certificateImg1.uploading = true;
		      	this.certificateImg1.canUpload = false;
		      	this.certificateImg1.isImgSrc = false;
		      	this.certificateImg1.updata.fileName = file.name;

				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.certificateImg1.uploading = false;
			      	this.certificateImg1.canUpload = true;
		        	this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
		        }
				if(!isLt2M) {
					this.certificateImg1.uploading = false;
			      	this.certificateImg1.canUpload = true;
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
//-------------------* end 身份证正面 * --------------------------

//-------------------*start 身份证反面 * --------------------------
			handleAvatarSuccess2(res, file , fileList) {
				this.certificateImg2.uploading = false;
		      	this.certificateImg2.canUpload = true;
		      	this.certificateImg2.isImgSrc = true;
				this.certificateImg2.imgSrc = res;
			},
			handleAvatarError2(err, file , fileList){
				this.certificateImg2.uploading = false;
		      	this.certificateImg2.isImgSrc = true;
		      	this.certificateImg2.dialogVisible = !!this.certificateImg2.imgSrc;
		      	this.Public.openError(this,"上传失败");
			},
			beforeAvatarUpload2(file) {
				this.certificateImg2.uploading = true;
		      	this.certificateImg2.canUpload = false;
		      	this.certificateImg2.isImgSrc = false;
		      	this.certificateImg2.updata.fileName = file.name;

				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.certificateImg2.uploading = false;
			      	this.certificateImg2.canUpload = true;
		        	this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
		        }
				if(!isLt2M) {
					this.certificateImg2.uploading = false;
			      	this.certificateImg2.canUpload = true;
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
//-------------------*end 身份证反面 * --------------------------

//-------------------*start 上传名片 * --------------------------
          handleAvatarSuccess3(res, file , fileList) {
            this.certificateImg3.uploading = false;
            this.certificateImg3.canUpload = true;
            this.certificateImg3.isImgSrc = true;
            this.certificateImg3.imgSrc = res;
          },
          handleAvatarError3(err, file , fileList){
            this.certificateImg3.uploading = false;
            this.certificateImg3.isImgSrc = true;
            this.certificateImg3.dialogVisible = !!this.certificateImg3.imgSrc;
            this.Public.openError(this,"上传失败");
          },
          beforeAvatarUpload3(file) {
            this.certificateImg3.uploading = true;
            this.certificateImg3.canUpload = false;
            this.certificateImg3.isImgSrc = false;
            this.certificateImg3.updata.fileName = file.name;

            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG&&!isPNG) {
              this.certificateImg3.uploading = false;
              this.certificateImg3.canUpload = true;
              this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
            }
            if(!isLt2M) {
              this.certificateImg3.uploading = false;
              this.certificateImg3.canUpload = true;
              this.$message.error('上传图片大小不能超过 2MB!');
            }
            return (isPNG || isJPG) && isLt2M;
          },
//-------------------*end 上传名片 * --------------------------


//验证手机格式
			yanshouji(){
				var ostr=this.operatorPhone;
		      	var reg=/^(13[0-9]|14[57]|15[012356789]|176|177|18[012356789])\d{8}$/;
				if (reg.test(ostr) != true){
					this.inphone=true;
				}else{
					this.inphone=false;
				}
			},
//验证QQ格式
			varQq(){
				var ostr=this.operatorQq;
		      	var reg=/[1-9]([0-9]{5,11})/;
				if (ostr!="") {
					if (reg.test(ostr) != true){
						this.oQq=true;
					}else{
						this.oQq=false;
					}
				}else{
					this.oQq=false;
				}
			},
//验证邮箱格式
			valemail(){
				var ostr=this.operatorEmail;
		      	var reg=/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
		      	if (ostr!="") {
					if (reg.test(ostr) != true){
						this.oemail=true;
					}else{
						this.oemail=false;
					}
				}else{
					this.oemail=false;
				}
			},
//账号同步手机号
			textphnoe(){
				if(this.shouji==this.zhanghao){
					this.operatorAccount=this.operatorPhone
				}

			},
			textzhanghao(){
				this.zhanghao='1'
			},
//验证账号格式
		    isalphanumber() {
		      	var ostr=this.operatorAccount;
		      	this.operatorAccount=this.operatorAccount;
					if (ostr==""){
						this.inpu=true;
					}else{
						this.inpu=false;
					}
			},
//验证密码格式
			inpasswd(){
				var ostr=this.operatorLoginPassword;
		      	var reg=/^[a-zA-Z0-9]{6,20}$/;
					if (reg.test(ostr) != true){
						this.inpaww=true;
					}else{
						this.inpaww=false;
					}
			},
//判断强度
			cnter(){
				var ostr=this.operatorLoginPassword;
				if (ostr.length>=6) {
					if(/[a-z]+/.test(ostr) || /[A-Z0-9]+/.test(ostr) || /[A-Z]+/.test(ostr)){
						this.ruo="#fe8486";
						this.qing="";
						this.zhong="";
					}
					if(/[a-zA-Z]+/.test(ostr) && /[0-9]+/.test(ostr)){
						this.zhong="#f9c842";
						this.ruo="#f9c842";
						this.qing="";
					}
					if(/[a-z]+/.test(ostr) && /[A-Z]+/.test(ostr) && /[0-9]+/.test(ostr)){
						this.qing="#00c292";
						this.zhong="#00c292";
						this.ruo="#00c292"
					}
				}else{
					this.ruo="";
					this.qing="";
					this.zhong="";
				}

			},
//验证两次输入密码是否一样
			inpasstwo(){
				if (this.operatorLoginPassword==this.inpasst) {
					this.intwo=false
				}else{
					this.intwo=true;
				}
			},
//姓名是否为空
			namenull(){
				if(this.memberName==''){
					this.inname=true;
				}else{
					this.inname=false;
				}
			},
			Oerror(){
				this.$notify.error({
		          	message: res.data.msg,
		          	duration: 3000
		        });
			},
			Osuccess(){
				this.$notify({
		          	message: '操作成功！',
		          	type: 'success',
		          	duration: 3000
		        });
			},

//提交新增信息
			upsave(){
				if(this.operatorPhone!='' && this.operatorAccount!='' && this.operatorLoginPassword!='' && this.inpasst!=''){
					this.qunbu=false;
				}else{
					this.qunbu=true;
				}
				if(!this.inphone && !this.inpu && !this.inpaww && !this.intwo && !this.inname && !this.qunbu){
					this.clickBtn=!this.clickBtn;
					this.axios({
						method: 'post',
						url:"/v3/basic/members",
						data:{
							"memberName":this.memberName,								// 提交姓名
							"operatorPortraitUrl":this.headerImg.imgSrc,                // 头像
							"operatorIdNumberUrl":this.certificateImg1.imgSrc,          // 身份证正面
							"operatorIdNumberUrl2":this.certificateImg2.imgSrc,         // 身份证反面
              "operatorBussinesscardUrl":this.certificateImg3.imgSrc,         // 名片
							"operatorPhone":this.operatorPhone,							// 提交手机
							"operatorEmail":this.operatorEmail,							// 提交邮箱
							"operatorAccount":this.operatorAccount,						// 提交账号
							"operatorLoginPassword":this.md5(this.operatorLoginPassword).toUpperCase(),	//提交密码
							"operatorQq":this.operatorQq,								// 提交QQ
							"operatorTel":this.operatorTel,								// 提交电话
							"gradeCode":this.gradeCode,									// 级别
							"operatorInvoiceNane":this.operatorInvoiceNane,				// 开户名称
							"operatorInvoiceBank":this.operatorInvoiceBank,				// 开户银行
							"operatorInvoiceAccount":this.operatorInvoiceAccount,		// 银行账号
							"operatorInvoiceTaxId":this.operatorInvoiceTaxId,			// 纳说人识别号
							"operatorInvoiceTitle":this.operatorInvoiceTitle,			// 发票抬头
						}
				}).then((res) => {
						this.clickBtn=!this.clickBtn;
						loading: true;
						this.$notify({
				         	message: '操作成功！',
				         	type: 'success'
				        });
						window.history.go(-1);
				}).catch((err)=>{
					this.clickBtn=!this.clickBtn;
					this.Public.openError(this,err.response.data);
				});
				}else{
					this.$notify.error({
				          	message:'请输入完整信息',
				        });
				}
			},

		},
    	mounted(){
			/*this.$refs.operatorIdNumberUrl.$el.childNodes[1].onclick=()=>{
				if(this.disa){
					this.Public.openInfo(this,"请先删除已上传的图片")
				}else{

				}
			};
			this.$refs.operatorIdNumberUrl2.$el.childNodes[1].onclick=()=>{
				if(this.disa2){
					this.Public.openInfo(this,"请先删除已上传的图片")
				}else{

				}
			};*/
			//设置页面高度
	      	var winHieg=document.documentElement.clientHeight;
	      	var cont=document.getElementById("content");
	    	cont.style.height = winHieg-115+"px";
			//获取会员级别
	      	this.axios({
					method: 'post',
					url:"/v3/member/grades/listAll",
					data:{}
				}).then((res) => {
					this.options = res.data.list;
					for(var i = 0 ; i < res.data.list.length;i++){
						if(res.data.list[i].gradeDefault == '1'){
							this.gradeCode=res.data.list[i].gradeCode;
							break;
						}
					}
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)

				});
				//帮助功能
			this.systemTemplateAjax();
	   		},
		}
</script>

<style scoped>
	/*body{
		overflow-y: auto!important;
	}*/
	input{
		color: #565656;
		font-size: 12px;
	}
	.location{
		padding: 3px 0 15px 0;
	}
	.content{
		background: #fff;
		padding: 15px;
		/*height: 1850px;*/
		overflow: auto!important;
		font-family: "微软雅黑";
		position: relative;
		overflow: auto;
		min-width: 1330px;
	}
	.per-left{
		width: 620px;
		float: left;
	}
	.per-left li{
		height: 55px;
		text-align: right;
	}
	.per-left li input{
		text-indent: 5px;height: 32px;border-radius:4px;border: 1px solid #cdd9e6 ;
	}
	.per-left li em,.accoUL li em{
		color: #f50;
	}
	.per-left li span{
		margin-right: 5px;
	}
	.per-left li .inptwid{
		width: 540px;
	}
	.per-left li .inptdun{
		width: 220px;
	}
	.personal{
		margin-top: 20px;
	}
/*上传头像*/
	.avatar-uploader {
		display: inline;
	}
.avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader.uploading .el-upload{
  	border: 1px dashed #d9d9d9;
  }
  .avatar-uploader-icon {
  	border: 1px dashed #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 110px;
    height: 110px;
    line-height: 110px;
    text-align: center;
  }
  .uploading .avatar-uploader-icon{
  	border-color: transparent;
  }
  .avatar {
    width: 110px;
    height: 110px;
    display: block;
    border-radius: 6px;
  }
  .avatar-shenfen-uploader .avatar {
    width: 220px;
    height: 125px;
    display: block;
  }
	/*end*/

	.per-right{
		margin-left: 130px;
		float: left;
	}
	.per-right span{
		float: left;
		margin-right: 16px;
	}
	.persZh{
		clear: both;
		margin-left: 10px;
		margin-top: 20px;
		height: 128px;
	}
	.perSpan{
		float: left;
	}
	.el-upload{
		float: left;
	}
	.shenfen{
		width: 350px;
		float: left;
	}
	.el-upload--picture-card{
		width: 125px;
	    height: 125px;
	    line-height: 125px;
	}
	.accoUL{
		text-align: right;
		width: 620px;
		margin-top: 20px;
		margin-bottom: 60px;
	}
	.accoUL input{
		width: 540px;
		text-indent: 5px;height: 32px;border-radius:4px;border: 1px solid #cdd9e6 ;
	}
	.accoUL li span{
		margin-right: 10px;
	}
	.accoUL li{
		height: 60px;
	}
	.account{
		margin-top: 20px;
	}
	.account .accoUL-li{
		text-align: left;text-indent: 80px;
		height: 40px;
	}
	.accoUL-li span{
		display: inline-block;
		text-indent: 0;
		text-align: center!important;
		width: 120px;
		height: 20px;
		line-height: 22px;
		background: #e9ecf3;
		color: #fff;
		margin-right: 3px!important;
		font-size: 13px;
	}
	.accoUL p{
		color: #f50;
	}
	.accoULzhang{
		width: 452px;
	}
	.accoULzhang input{
		width: 370px;
	}
	.queren{
		position: fixed;
		bottom: 0px;
		margin-left: -15px;
		width: 87%;
		background: #fff;
		height: 80px;
		z-index: 10;
	}

	.queren a{
		display: inline-block;
		height: 32px;
		line-height: 32px;
		background: #fff!important;
		border: 1px solid #cdd9e6 ;
		color: #666!important;
		width: 80px;
		border-radius:20px;
		text-align: center;
		margin-top: 20px;
		margin-right: 20px;
		box-sizing: border-box;
	}
	.queren .baocun{
		color: #fff!important;
		background: #13C19F!important;
		z-index: 100;
		cursor: pointer;
		border: 0;
		margin-left: 30px;
	}
	.content input:hover{
		border-color:#03B8CC ;
		transition: ease-in-out 0.5s;
	}

	.qiangdu{
		background: #fe8486!important;
	}
</style>
